import { useEffect, useState } from "react";
import { createPortal } from "react-dom";
import styles from "./style.module.css";
import clsx from "clsx";
interface ActionSheetProps {
  actions: { value: string | number; text: string }[];
  visible: boolean;
  onSelect: (action: { value: string | number; text: string }) => void;
  onCancel: () => void;
}
const ActionSheet: React.FC<ActionSheetProps> = (props) => {
  const { actions, visible, onSelect, onCancel } = props;
  const [active, setActive] = useState(false);

  useEffect(() => {
    setActive(visible);
  }, [visible]);

  return createPortal(
    <>
      {visible && <div className={styles.mask} onClick={() => onCancel()}></div>}
      {visible && (
        <div
          className={clsx({ [styles.active]: active }, styles["action-sheet"])}
        >
          {actions.map((it) => (
            <p
              className={styles["action-option"]}
              key={it.value}
              onClick={() => {
                setActive(false);

                setTimeout(() => {
                  onSelect(it);
                }, 300);
              }}
            >
              {it.text}
            </p>
          ))}
        </div>
      )}
    </>,
    document.body
  );
};

export default ActionSheet;
